import React, { Component } from 'react'
import axios from 'axios';
import { LeftOutline } from 'antd-mobile-icons';
import gift from "./img/gift.png";
import two from "./img/two-member.png";
import cart1 from "./img/new_shopCart1.png";
import "./index.scss"




export default class ListCom extends Component {
    constructor() {
        super();
        this.state = {
            list: [],
            end: false
        };
        this.pype = true;
        this.page = 1
    }
    componentDidMount() {
        console.log(this.props);
        this.moreData();
        //触底加载
        this.onScroll();
        // let searchKey = this.props.match.params.searchstr;

        //https://srv.hotkidceo.com/appapi/root-ceo-commodity/commodityApi/commoditySearch
    }

    onScroll = () => {
        window.onscroll = () => {
            //获取滚动距离
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            //窗口的高度
            let windowHeight = document.documentElement.clientHeight;
            //滚动的高度
            let scrollHeight = document.body.scrollHeight;
            if (scrollHeight - scrollTop <= windowHeight) {
                if (this.type) {
                    this.page++;
                    this.moreData();
                }
                this.type = false
            }
        }
    }
    moreData = () => {
        if (!this.state.end) {
            let searchKey = this.props.match.params.searchstr;
            axios.post('https://srv.hotkidceo.com/appapi/root-ceo-commodity/commodityApi/commoditySearch',
                {
                    "memberKey": "",
                    "searchKey": searchKey,
                    "isWholeSale": 0,
                    "channelId": "C06022632001",
                    "page": this.page
                }).then(res => {
                    console.log(res);
                    let data = res.data.data.templateList;
                    if (data.length !== 0) {
                        this.setState({
                            list: [...this.state.list, ...data]
                        });
                        this.type = true;
                    } else {
                        this.setState({
                            end: true
                        })
                    }

                })
        }
    }
    componentWillUnmount() {
        window.onscroll = undefined;
    }
    goBack = () => {
        this.props.history.go(-1);
    }

    render() {
        let { list, end } = this.state;
        return (
            <div className="list_con">
                <div className="list_title"> <LeftOutline onClick={this.goBack} /> 列表页面</div>
                <ul>
                    {
                        list.map((item, index) => <li key={index} className='con2'>

                            <div className='img'><img src={item.listImages} alt={item.listImages} /></div>
                            <div className='text'>
                                <div className='img1'>
                                    <img src={gift} alt={gift} />
                                </div>
                                <div className="name"> {item.name}</div>
                                <div className='ccc'>{item.displayName}</div>
                                <div className='red'>
                                    <span> ￥{item.retailPrice}</span>
                                    <img src={cart1} alt={cart1} />
                                </div>
                                <div>
                                    <span className='ccc'>￥{item.supplyPrice} </span>
                                    <img src={two} alt={two} />
                                </div>
                            </div></li>)
                    }
                </ul>
                {
                    end ? <div>您的数据都加载完了，请不要再拉了...</div> : ""
                }
            </div>
        )
    }
}

